<template>
  <div class="box">
    <div class="tableHeader">
      <div>
        <label for=""
          >搜索部门：<el-input
            v-model="searchRole"
            placeholder="请输入你要搜索的部门名字"
            clearable
            @keyup.enter="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </label>
        <el-button @click="handleSearch" type="primary">搜索</el-button>
        <el-button @click="resetTable">重置</el-button>
      </div>
      <el-button @click="addDeps" type="primary">添加部门</el-button>
    </div>
    <el-table
      :data="tableData"
      border
      style="min-width: 1200px; max-width: 1200px"
    >
      <el-table-column prop="depname" label="部门名称" />
      <el-table-column prop="depfunction" label="部门职能" />
      <el-table-column prop="membersnum" label="成员数量" />
      <el-table-column prop="head" label="负责人" />
      <el-table-column prop="headphone" label="负责人电话" />
      <el-table-column label="部门状态">
        <template #default="{ row }">
          <span>{{ row.depstatus === 1 ? "正常" : "禁用" }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button @click="openEdit(row)" type="primary" size="small"
            >编辑</el-button
          >
          <el-popconfirm
            width="220"
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon-color="#626AEF"
            title="你确定要删除此项吗？"
            @confirm="handleDelet(row)"
          >
            <template #reference>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :small="false"
      :disabled="false"
      :background="false"
      layout="total, prev, pager, next, jumper"
      :total="tableData.length"
    />
  </div>

  <!-- 添加部门对话框 -->
  <el-dialog v-model="addDialog" title="添加部门" width="30%">
    <el-form ref="addForm" :model="addData" label-width="120px" :rules="rules">
      <el-form-item label="部门名称" prop="depname">
        <el-select v-model="addData.depname" placeholder="请选择部门">
          <el-option label="财务部" value="财务部" />
          <el-option label="产品部" value="产品部" />
          <el-option label="市场部" value="市场部" />
          <el-option label="人事部" value="人事部" />
          <el-option label="运营部" value="运营部" />
        </el-select>
      </el-form-item>

      <el-form-item label="部门职能" prop="depfunction">
        <el-input v-model="addData.depfunction" />
      </el-form-item>

      <el-form-item label="成员数量" prop="membersnum">
        <el-input v-model="addData.membersnum" />
      </el-form-item>

      <el-form-item label="负责人" prop="head">
        <el-input v-model="addData.head" />
      </el-form-item>

      <el-form-item label="负责人电话" prop="headphone">
        <el-input v-model="addData.headphone" />
      </el-form-item>

      <el-form-item label="部门状态" prop="depstatus">
        <el-select v-model="addData.depstatus" placeholder="请选择部门状态">
          <el-option label="正常" :value="1" />
          <el-option label="禁用" :value="0" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleAddDep">确定</el-button>
        <el-button @click="addDialog = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!-- 编辑对话框 -->
  <el-dialog v-model="editDialog" title="编辑部门" width="30%">
    <el-form
      ref="editForm"
      :model="editData"
      label-width="120px"
      :rules="rules"
    >
      <el-form-item label="部门名称" prop="depname">
        <el-select v-model="editData.depname" placeholder="请选择部门">
          <el-option label="财务部" value="财务部" />
          <el-option label="产品部" value="产品部" />
          <el-option label="市场部" value="市场部" />
          <el-option label="人事部" value="人事部" />
          <el-option label="运营部" value="运营部" />
        </el-select>
      </el-form-item>

      <el-form-item label="部门职能" prop="depfunction">
        <el-input v-model="editData.depfunction" />
      </el-form-item>

      <el-form-item label="成员数量" prop="membersnum">
        <el-input v-model="editData.membersnum" />
      </el-form-item>

      <el-form-item label="负责人" prop="head">
        <el-input v-model="editData.head" />
      </el-form-item>

      <el-form-item label="负责人电话" prop="headphone">
        <el-input v-model="editData.headphone" />
      </el-form-item>

      <el-form-item label="部门状态" prop="depstatus">
        <el-select v-model="editData.depstatus" placeholder="请选择部门状态">
          <el-option label="正常" :value="1" />
          <el-option label="禁用" :value="0" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleEdit">确定</el-button>
        <el-button @click="editDialog = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { getdeps, depsedit, adddep, deletdep } from '@/api/user.js';
import { Search } from '@element-plus/icons-vue';
export default {
  data() {
    return {
      // 分页
      currentPage: 1,
      pageSize: 8,

      // 表格数据
      tableData: [],
      // 添加添加部门对话框是否显示
      addDialog: false,
      // 添加部门对话框表格数据
      addData: {
        depname: '',
        depfunction: '',
        membersnum: 0,
        head: '',
        headphone: 0,
        depstatus: 1,
      },
      // 添加部门检验规则
      rules: {
        depname: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入部门名称！',
          },
        ],
        depfunction: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入部门职能',
          },
        ],
        membersnum: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入部门成员数量！',
          },
        ],
        head: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入部门负责人！',
          },
        ],
        headphone: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入部门负责人电话！',
          },
        ],
        depstatus: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入部门状态！',
          },
        ],
      },

      // 编辑相关数据
      editId: '',
      editDialog: false,
      editData: {
        depname: '',
        depfunction: '',
        membersnum: '',
        head: '',
        headphone: 0,
        depstatus: 1,
      },

      // 搜索
      searchRole: '',
    };
  },
  components: {
    Search,
  },
  methods: {
    // 获取部门列表
    getData() {
      getdeps().then((res) => {
        this.tableData = res;
      });
    },

    // 点击添加部门弹出对话框
    addDeps() {
      this.addDialog = true;
    },
    // 确认添加部门
    handleAddDep() {
      adddep(this.addData).then(() => {
        this.getData();
      });
      this.addDialog = false;
    },

    // 打开编辑窗口
    openEdit(row) {
      this.$refs?.editForm?.resetFields?.();
      this.editDialog = true;
      this.editId = row.id;

      this.editData.depname = row.depname;
      this.editData.depfunction = row.depfunction;
      this.editData.membersnum = row.membersnum;
      this.editData.head = row.head;
      this.editData.headphone = row.headphone;
      this.editData.depstatus = row.depstatus;
      console.log(this.editData);
    },
    // 确认编辑
    handleEdit() {
      depsedit(this.editId, this.editData).then(() => {
        this.getData();
      });
      this.editDialog = false;
    },

    // 删除功能
    handleDelet(row) {
      deletdep(row.id).then(() => {
        this.getData();
      });
    },

    // 搜索功能
    handleSearch() {
      // this.searchRole
      getdeps().then((res) => {
        this.tableData = res.filter((item) => {
          return item.depname.includes(this.searchRole);
        });
      });
    },

    // 重置表格
    resetTable() {
      this.searchRole = '';
      this.getData();
    },
  },
  watch: {
    addDialog() {
      this.$refs?.addForm?.resetFields?.();
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tableHeader {
  width: 1200px;
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  .el-input {
    width: 300px;
  }
}
</style>
